<template>
  <div class="dashboard-editor-container" v-loading="loading">
    <!--天气-->
    <iframe
      allowtransparency="true"
      frameborder="0"
      width="565"
      height="98"
      scrolling="no"
      src="//tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=1&v=0&d=3&bd=0&k=000000&f=&ltf=009944&htf=cc0000&q=0&e=0&a=1&c=54511&w=565&h=98&align=center"
    ></iframe>
    <!--天气end-->
    <panel-group :cdata="data[0]" />
    <el-row>
      <div class="chart-wrapper"><line-chart :chart-data="data" /></div>
    </el-row>
    <el-row :gutter="32">
      <el-col :span="8">
        <div class="chart-wrapper">
          <a class="pop" style="display: block;overflow: hidden;" href="https://xdmly.qiyiiot.com/desk/" target="_blank" title="点击跳转到大屏数据展示">
            <div class="lab">大屏数据展示</div>
            <img :src="pc" style="width: 100%;" />
          </a>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="chart-wrapper">
          <a class="pop" href="https://mp.weixin.qq.com/" target="_blank" title="点击跳转到微信公众号后台">
            <div class="lab">微信公众号（{{ data[0].wxs }}人关注过）</div>
            <img :src="app" />
          </a>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="chart-wrapper">
          <a class="pop" href="https://mp.weixin.qq.com/" target="_blank" title="点击跳转到小程序后台">
            <div class="lab">小程序（{{ data[0].members }}人使用过）</div>
            <img :src="app" />
          </a>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup';
import LineChart from './dashboard/LineChart';
import { home } from '@/api/monitor/server';
import app from '@/assets/images/app.jpg';
import pc from '@/assets/images/pc.jpg';
export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart
  },
  data() {
    return {
      loading: true,
      data: [{}],
      app: app,
      pc: pc
    };
  },
  created() {
    home().then(res => {
      this.data = res.data;
      this.loading = false;
    });
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    }
  }
};
</script>

<style lang="scss">
.dashboard-editor-container {
  padding: 0px 22px 20px 22px;
  .chart-wrapper {
    background: #fff;
    padding: 16px;
    margin-top: 25px;
    border-radius: 7px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    overflow: hidden;
    .pop {
      cursor: pointer;
      .lab {
        font-weight: bold;
        font-size: 17px;
        padding-bottom: 15px;
        color: #0d90d0;
      }
      img {
        margin: 0 auto;
        height: 210px;
        border-radius: 5px;
      }
    }
  }
}
</style>
